<!-- home -->
<template>
  <div class="index-container">
    <van-nav-bar title="视频分类" :fixed="true" :placeholder="true" @click-left="$router.push('/home')" />

    <div class="warpper">
      <div class="my-swipe">
        <van-swipe class="my-swipe" indicator-color="#000" :loop="false">
          <!--<van-swipe-item>
            <div class="item-box" style="background:#ff9235">
              <div class="title">{{userInfo.role.name}}</div>
              &lt;!&ndash; <div class="sub-title">孩子的启蒙老师</div> &ndash;&gt;
              <img src="../../../static/images/book.png">
              <van-button type="primary" block plain @click="goDetails(userInfo.roleId)">查看详情</van-button>
            </div>
          </van-swipe-item>-->
          <!-- <van-swipe-item>
            <div class="item-box" style="background:#2db5fb">
              <div class="title">6-9岁</div>
              <div class="sub-title">二级标题</div>
              <img src="../../../static/images/tab2.png">
              <van-button type="primary" block plain @click="goDetails(1)">查看详情</van-button>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="item-box" style="background:#fb602d">
              <div class="title">10-15岁</div>
              <div class="sub-title">二级标题</div>
              <img src="../../../static/images/tab2.png">
              <van-button type="primary" block plain @click="goDetails(2)">查看详情</van-button>
            </div>
          </van-swipe-item> -->
          <template #indicator>
            <div class="custom-indicator"></div>
          </template>
        </van-swipe>

        <div class="item-header">热门类型</div>
        <van-grid>
          <van-grid-item
                  v-for="(item, index) in categoryHotList"
                  :key="item.id"
                  :icon="item.url || 'photo-o'"
                  :text="item.name"
                  @click="goDetails(item)"
          />
        </van-grid>

        <van-list finished-text="没有更多了">
          <div class="item-header">所有分类</div>
          <van-grid :column-num="3">
            <van-grid-item
                    v-for="(item, index) in categoryList"
                    :key="item.id"
                    :icon="item.url || 'photo-o'"
                    :text="item.name"
                    @click="goDetails(item)"
            />
          </van-grid>

          <div class="item-header" style="text-align: center;font-size: 14px;">没有更多了..</div>

        </van-list>

<!--        <div class="item-header">内容横排</div>
        <van-grid direction="horizontal" :column-num="3">
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>

        <div class="item-header">页面导航</div>
        <van-grid clickable :column-num="2">
          <van-grid-item icon="home-o" text="路由跳转" to="/" />
          <van-grid-item icon="search" text="URL 跳转" url="https://github.com" />
        </van-grid>

        <div class="item-header">徽标提示</div>
        <van-grid :column-num="2">
          <van-grid-item icon="home-o" text="文字" dot />
          <van-grid-item icon="search" text="文字" badge="99+" />
        </van-grid>-->
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo} from '@/api/user.js'
import api from '@/api'

export default {
  data() {
    return {
      userInfo:null,
      categoryList: [],
      categoryHotList: [],
    }
  },

  computed: {},

  mounted() {

    this.getUserInfo()
    this.getCategoryList()
    this.getCategoryHotList()
  },

  methods: {
    async getUserInfo(){
      await getUserInfo({
          id: this.$store.getters.userId}
        ).then(res => {
        if (res.code == 200) {
          this.userInfo = res.data
        } else {
          this.$notify(res.message)
        }
      })
    },
    goDetails(item){
      this.$router.push({
        path: `/courseDetails?type=${item.id}&categoryName=${item.name}`
      })
    },
    async getCategoryList() {
      const res = await api.category.all();
      this.categoryList = res.data;
    },
    async getCategoryHotList() {
      const res = await api.category.all({hot: 1});
      this.categoryHotList = res.data;
    },
  }
}
</script>
<style lang="scss" scoped>


body,html{
  height: 100%;
}
.index-container {
  text-align: center;
  height: 100%;
  .my-swipe{
    text-align: center;
    margin:0 auto;
    position: absolute;
    top: 1.2rem;
    bottom: 0.85rem;
    left: 0;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 120px;
    .item-header {
      text-align: left;
      margin: 15px;
      font-size: 16px;
      color: gray;
      /*font-weight: bold;*/
    }
    .item-box{
      transform: scale(0.9);
      border-radius: .5rem;
      height: 100%;
      color: #fff;
      padding-top: 1.3889rem;
      box-sizing: border-box;
      .van-button{
        color: #fff;
        background: none;
        border-color: #fff;
        width: 60%;
        margin:0 auto;
        border-radius: .9rem;
        font-size: .5rem;
      }
      .title{
        font-size: 1rem;
        font-weight: bold;
      }
      .sub-title{
        font-size: .4167rem;
        margin-top: .5556rem;
      }
      img{
        width: 60%;
        margin:20% auto;
      }
    }
    /deep/ .van-icon__image {
      width: 2rem;
    }
  }
}
</style>
